<template>
    <a-config-provider :locale="locale">
        <div id="app">
            <router-view/>
        </div>
    </a-config-provider>
</template>
<script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
    import enquireScreen from '@/utils/device'

    export default {
        data() {
            return {
                locale: zhCN,
            }
        },
        // beforeCreate   整个Vue创建完成之前
        // 整个Vue创建完成之后
        created() {
            let that = this
            console.log("locale",this.locale)

            enquireScreen(deviceType => {
                // tablet
                if (deviceType === 0) {
                    that.$store.commit('TOGGLE_DEVICE', 'mobile')
                    that.$store.dispatch('setSidebar', false)
                }
                // mobile
                else if (deviceType === 1) {
                    that.$store.commit('TOGGLE_DEVICE', 'mobile')
                    that.$store.dispatch('setSidebar', false)
                } else {
                    that.$store.commit('TOGGLE_DEVICE', 'desktop')
                    that.$store.dispatch('setSidebar', true)
                }

            })
        },
    }

</script>
<style lang="less">
    #app {
        height: 100%;
    }

    input:-webkit-autofill {
        -webkit-text-fill-color: #F5F5F5 !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: rgba(0,0,0,0.1) !important;
        transition: background-color 50000s ease-in-out 0s;
    }

    /*    通用颜色样式  */
     H2,
    .td,
    .anticon > svg,
    .ant-message-notice-content,
    .ant-notification-notice,
    .ant-notification-notice-message,
    .ant-upload-text,
    .ant-pagination-total-text,
    .ant-form-item-label > label,
    .ant-card-head-title,
    .ant-menu-item,
    .ant-menu-item > a,
    .ant-menu-submenu-title,
    .ant-menu-submenu-title > .ant-menu-submenu-arrow,
    .ant-modal-confirm-title,
    .ant-modal-confirm-content,
    .ant-pagination-item a,
    .ant-pagination-options-quick-jumper,
    .ant-radio-wrapper > span,
    .ant-tabs-tab,
    .ant-input-number,
    .ant-tree-title,
    .ant-empty-description > span,
    .ant-popover-title,
    .ant-card-meta-title,
    .ant-card-meta-description,
    .vxe-cell,
    .j-vxe-reload-effect-span,
    .ant-drawer-title,
    .ant-table-tbody > tr > td,
    .ant-empty-description,
    .vxe-table--empty-content,
    .ant-calendar-range-picker-separator,
    .ant-pagination-item-ellipsis,
    .ant-input-search-button,
    .input-table .tbody .td input,
    .text-white {
        color: #F5F5F5 !important;
    }

    //.ant-menu-submenu-title[aria-expanded="true"] > .ant-menu-item > a {
    //    color: #0a66c2;
    //}


    /*左菜单按钮*/
    //.ant-menu-vertical,
    //.ant-input[disabled],
    //.drawer-bootom-button,
    //.ant-menu-submenu-title .ant-menu-submenu-arrow::before,
    //.ant-menu-submenu-title .ant-menu-submenu-arrow::after {
    //    background: #eeeeee !important;
    //}


    /*ant-card*/
    .ant-btn-primary,
    .ant-input-search-button,
    .ant-input-group-addon,
    .ant-card {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .input-table,
    .tbody,
    .ant-drawer-header,
    .ant-upload,
    .ant-checkbox-checked .ant-checkbox-inner,
    .ant-checkbox-inner,
    .ant-table-placeholder,
    .ant-pagination-item-active,
    .ant-radio > .ant-radio-inner,
    .ant-table-row-expand-icon,
    .ant-input-number,
    .ant-tabs-tabpane > ul > li,
    .ant-input-group-addon,
    .ant-tree-checkbox-inner,
    .ant-tree.ant-tree-show-line li span.ant-tree-switcher,
    .ant-pagination-options-quick-jumper input,
    .vxe-table .vxe-body--row,
    .ant-modal-header,
    .card-container,
    .ant-tabs-tab,
    .ant-radio-button-wrapper-checked,
    .input-table .tbody .tr-expand,
    .input-table .tbody .td input,
    .ant-table-tbody > tr > td,
    .ant-table-body,
    .ant-menu-sub {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    .ant-pagination-options-quick-jumper input{
        color: white !important;
    }


    .ant-switch,
    .ant-input[disabled],
    .input-table .tbody .tr:hover,
    .ant-menu-item-selected {
        background: rgba(255, 255, 255, 0.5) !important;
    }

    .ant-card {
        border-radius: 10px !important;
    }

    /*table*/
    .ant-drawer-content,
    .ant-modal-content {
        background-size: 100% 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        transition: background .2s;
        background: #767676 !important;
    }

    .ant-notification-notice,
    .ant-message-notice-content {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .ant-popover-inner,
    .ant-popover-inner,
    .ant-table-body-inner > .ant-table-fixed {
        background: rgba(0, 0, 0, 0.8) !important;
    }

    // 设置表格的滚动条

    .ant-table-body{
        word-break: break-all;
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
            width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }
        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            /*background: rgba(144, 147, 153, 0.5);*/
            background: #ffffff;
        }
        /*定义滚动条轨道*/
        &::-webkit-scrollbar-track {
            // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            background: transparent;
        }

        cursor:pointer;
    }

    .j-table-force-nowrap:hover,
    .ant-table-wrapper:hover,
    .ant-table-content:hover,
    .ant-table-body:hover{
        word-break: break-all;
        &::-webkit-scrollbar {
            width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            /*background: rgba(144, 147, 153, 0.5);*/
            background: #b8faff;
        }
        &::-webkit-scrollbar-track {
            // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            background: transparent;
            color: red;
        }
        &::-webkit-scrollbar-track-piece{
            background-color: rgba(250,250,250,0.4);
        }
    }

    .ant-modal-title,
    .ant-table-thead > tr > th {
        background: rgba(0, 0, 0, 0) !important;
        color: #F5F5F5 !important;
        font-weight: bold !important;
        font-size: 16px !important;
    }

    .j-vxe-table-box .vxe-table.border--default .vxe-table--header-wrapper,
    .j-vxe-table-box .vxe-table.border--full .vxe-table--header-wrapper,
    .j-vxe-table-box .vxe-table.border--outer .vxe-table--header-wrapper,
    .vxe-custom--option .vxe-checkbox--icon:before,
    .vxe-export--panel-column-option .vxe-checkbox--icon:before,
    .vxe-table--filter-option .vxe-checkbox--icon:before,
    .vxe-table .vxe-cell--checkbox .vxe-checkbox--icon:before {
        background: rgba(0, 0, 0, 0) !important;
    }

    .layout .header .user-wrapper .action:hover,
    .layout .top-nav-header-index .user-wrapper .action:hover,
    /*.ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,*/
    /*.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,*/
    /*.ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,*/
    /*.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,*/
    /*.ant-table-tbody > tr.ant-table-row-selected td,*/
    .ant-table-tbody > tr:hover {
        background: rgba(255, 255, 255, 0.5) !important;
    }

    /*    ant-alert*/
    .ant-tabs-tab-active.ant-tabs-tab,
    .ant-tabs-tab-active.ant-tabs-tab svg,
    .ant-alert > a {
        color: #4fcae2 !important;
    }

    .ant-alert-success,
    .ant-alert-info {
        background-color: rgba(230, 247, 255, 0.2) !important;
    }

    /*    form */
    .ant-checkbox-wrapper,
    .ant-select-selection,
    .ant-select-selection--multiple .ant-select-selection__choice,
    .ant-input {
        background: rgba(0, 0, 0, 0) !important;
        color: #F5F5F5 !important;
    }
    .ant-calendar-picker{
        width: auto !important;
    }

    .ant-calendar-selected-day .ant-calendar-date{
        color: blue !important;
    }

    .ant-btn:hover {
        color: #aaaaaa !important;
    }

    /*    date */

    .ant-calendar-selected-date div,
    .ant-calendar-header a:hover,
    .ant-calendar-month-panel-selected-cell a {
        color: #0b8892 !important;
        font-weight: bold;
    }

    .ant-calendar-footer-btn a {
        color: #aaaaaa !important;
    }

    .ant-form-item-children > span {
        min-width: 160px !important;
    }
    // 打印去除页眉页脚
    @page{
        size: auto A4 landscape;
        margin: 3mm;
    }

    #printTableList h2{
        color: #000000 !important;
    }

    /*html打印的时候   不重复显示table的thead内容*/
    #printTableList .ant-table-thead{
        display: table-row-group !important;
    }
    #printTableList .ant-table-bordered .ant-table-thead > tr > th,
    #printTableList .ant-table-bordered .ant-table-tbody > tr > td,
    #printTableList .ant-table-small,
    #printTableList .ant-table-small.ant-table-bordered .ant-table-content{
        border-color: black !important;
        color: #000000 !important;
        font-weight: lighter !important;
        font-size: 12px !important;
    }
    #printTableList .ant-modal-title,
    #printTableList .ant-table-thead > tr > th {
        background: rgba(0, 0, 0, 0) !important;
    }
    #printTableList2 h2{
        color: #000000 !important;
    }

    /*html打印的时候   不重复显示table的thead内容*/
    #printTableList2 .ant-table-thead{
        display: table-row-group !important;
    }
    #printTableList2 .ant-table-bordered .ant-table-thead > tr > th,
    #printTableList2 .ant-table-bordered .ant-table-tbody > tr > td,
    #printTableList2 .ant-table-small,
    #printTableList2 .ant-table-small.ant-table-bordered .ant-table-content{
        border-color: black !important;
        color: #000000 !important;
        font-weight: lighter !important;
        font-size: 12px !important;
    }
    #printTableList2 .ant-modal-title,
    #printTableList2 .ant-table-thead > tr > th {
        background: rgba(0, 0, 0, 0) !important;
    }

    .ant-tabs-tabpane  ul>li{
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ant-tabs-tabpane ul li i{
        font-size: 0.4rem;
    }

    /*时间弹窗选择*/
    .ant-calendar-today .ant-calendar-date {
        color: #059f90 !important;
        font-weight: bold !important;
        border-color: #059f90 !important;
    }
    .countSum{
        margin-bottom: 16px;
        color:#F5F5F5;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
    }

</style>
